<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /*⑥派生选择器:后代选择器，用于选中祖先范围内所有匹配的子孙元素
              语法:任意选择器[祖先元素]任意选择器[ 祖先元素中所有匹配的子元素]{}
            */
           #header span{
               display: block;
               width: 50%;/*?问题*/
               background-color:#8f8f8f ;
           }
           #header span:hover{
               background-color: #00ff00;
           }
           /*⑦子代选择器：
             语法：任意选择器【父元素中所有匹配的子元素】{}
             实现：选中左导航，颜色：#00ff00
           */
          #header>span{
              background-color: #00ff00;
          }
        </style>
    </head>
    <body>
        <div id="header">
            <span>左导航</span>
            <span>
            <div class="header"></div>    
            <span>右2导航</span>
            <span>右1导航</span>
            </span>
        </div>
    </body>
</html>